画像やレイヤーを半透明で表示する
Internet ExplorerやNetscapeには、画像やレイヤーを半透明で表示する機能が装備されています。その指定は、わずか1行のスタイルシートを追加するだけ。もちろん、透明度を0〜100%で指定することも可能です。とっても簡単なテクニックなので、ぜひとも覚えておきましょう。

→ Internet Explorerで画像を半透明で表示させる
 
Internet Explorerで画像を半透明で表示させる場合は、「filter:Alpha()」のスタイルシートを「IMG」タグに追加します。Alphaのカッコ内には、画像の透明度を指示するOpacity属性を記述し、透明度を0〜100で指定します。これで画像を半透明表示できます。なお、border属性を記述して画像に枠線を描画した場合は、枠線も指定した透明度で表示されます。
<IMG src="photo1.jpg" style="filter:Alpha(opacity=50)">


→ Netscapeで画像を半透明で表示させる
 
「filter:Alpha()」はInternet Explorer独自のスタイルシートとなるため、Netscapeでは画像を半透明表示できません。Netscapeでも半透明表示を実現するには「-moz-opacity」のスタイルシートを追加し、透明度を0〜1の値で指定します。これでInternet ExplorerとNetscapeの両方で画像を半透明で表示できるようになります。なお、サンプルのHTMLには「opacity」のスタイルシートも追加されていますが、これは将来的にCSS3が勧告されたときの対策であり、現時点では何も機能しません。よって、最後の「opacity」は省略してもかまいません。
<IMG src="photo1.jpg"
    style="filter:Alpha(opacity=50); -moz-opacity:0.50; opacity:0.50">


→ レイヤーを半透明で表示させる
 
「filter:Alpha()」や「-moz-opacity」のスタイルシートは、「IMG」タグ以外に使用することも可能です。たとえば、レイヤーの「DIV」タグに使用すれば、レイヤー全体を半透明表示できます。特に、画像や文字を重ねて配置する場合などに使用すれば、背景が透けて見えるため効果的な演出を実現できます。ただし、Internet Explorerでレイヤーを半透明表示させるには、widthなどサイズを指定するスタイルシートを記述しておく必要があります。
<DIV align="center"
    style="position:absolute; left:100px; top:100px; z-index:3;
        width:220px; height:220px; background:#FFFFFF;
        border-style:solid; border-width:2px;
        filter:Alpha(opacity=70); -moz-opacity:0.7; opacity:0.70">
  <BR>
  <IMG src="photo1.jpg"><BR>
  このレイヤーは半透明で<BR>表示されます。
</DIV>


yVoC[UNLIMIT1~] ECir|C Yahoo yV LINEf[^[z500~`I


z[y[W NWbgJ[h COiq O~yz COsI COze